<template>
  <div>
    {{ num }}----{{num1}}----{{ qwe }}
    <button @click="handleClick">+1</button>

    <hr>
    {{ counter }}
    <button @click="handleAdd">+1</button>
    <p>
      <pre>{{ data.list }}</pre>
    </p>
    <p>
      <pre>{{ data.obj }}</pre>
    </p>
    <button @click="handleClickObj">添加一个数据</button>

    <hr>
    <div>
      <b v-for="(v, i) in tabs" :key="i"
        :class="activeIndex === i ? 'active': ''"
        @click="handleChangeActiveIndex(i)"
      >{{ v.title }}</b>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref, computed } from "vue";
import axios from "axios";
// 响应式 变量
// 通过 ref
const num = ref(1);
const num1 = ref(2);

// 声明多个变量
const data = reactive({
  counter: 1000,
  list: [],
  obj: {
    name: "张三",
    age: 18
  }
});
// 生命周期
// 挂载
onMounted(() => {
  axios.get("/list").then(resp => {
    data.list = resp.data.data;
  });
});

// 销毁
onUnmounted(() => {});

// 计算属性
const qwe = computed(() => {
  return num1.value * num.value;
});

// 函数声明
const handleClick = () => {
  // 操作变量需要访问 变量.value
  num.value++;
};
const handleAdd = () => {
  data.counter++;
};
const handleClickObj = () => {
  data.obj.sex = "男";
};
// 返回的对象是响应式的数据
// 可以在模板等其他地方直接使用

const tabs = ref([
  {
    title: "item-1",
    children: ["item-1-1", "item-1-2"]
  },
  {
    title: "item-2",
    children: ["item-2-1", "item-2-2"]
  },
  {
    title: "item-3",
    children: ["item-3-1", "item-3-2"]
  }
]);
const activeIndex = ref(0);
const handleChangeActiveIndex = i => {
  activeIndex.value = i;
};

// return {
//   num,
//   handleClick,
//   num1,
//   // 通过 reative 创建的数据
//   // 需要返回时 使用toRefs 解构出来返回
//   ...toRefs(data),
//   handleAdd,
//   handleClickObj,
//   qwe,
//   tabs,
//   activeIndex,
//   handleChangeActiveIndex
// }
</script>

<style>
b {
  padding: 6px 12px;
}
b.active {
  color: red;
}
</style>
